<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柔光日记 - AI育儿音乐播放器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        :root {
            --primary: #ff9ebd;
            --primary-dark: #ff6b9c;
            --secondary: #a6d8ff;
            --accent: #ffd166;
            --light: #fff9fb;
            --text: #4a4a4a;
            --text-light: #888;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #fff0f5 0%, #e6f7ff 100%);
            min-height: 100vh;
            color: var(--text);
            padding-bottom: 100px;
        }
        
        .header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            padding: 1.5rem 2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            color: white;
        }
        
        .header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
        }
        
        .header-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
        }
        
        .logo i {
            margin-right: 12px;
            font-size: 2.2rem;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 1.8rem;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            transition: all 0.3s;
            padding: 0.5rem 1rem;
            border-radius: 25px;
        }
        
        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .main-content {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }
        
        .hero {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            display: flex;
            margin-bottom: 3rem;
        }
        
        .hero-text {
            padding: 3rem;
            flex: 1;
        }
        
        .hero-image {
            flex: 1;
            background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .hero-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.1"/></svg>');
            background-size: 80px 80px;
        }
        
        .hero-image-content {
            text-align: center;
            color: white;
            padding: 2rem;
            z-index: 2;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-dark);
            line-height: 1.3;
        }
        
        .hero p {
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 2rem;
            color: var(--text-light);
        }
        
        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            box-shadow: 0 5px 15px rgba(255, 107, 156, 0.4);
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 107, 156, 0.6);
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        
        .feature-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, var(--secondary) 0%, #80c5ff 100%);
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            color: white;
        }
        
        .feature-content {
            padding: 2rem;
        }
        
        .feature-content h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--primary-dark);
        }
        
        .feature-content p {
            color: var(--text-light);
            line-height: 1.7;
        }
        
        .section-title {
            text-align: center;
            margin: 3rem 0;
            color: var(--primary-dark);
            font-size: 2rem;
            position: relative;
        }
        
        .section-title::after {
            content: "";
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            margin: 0.5rem auto;
            border-radius: 2px;
        }
        
        /* 音乐播放器样式 */
        .music-player-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        .music-player {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            padding: 15px;
            width: 300px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 209, 220, 0.3);
            transform-origin: bottom right;
            transition: transform 0.3s ease;
        }
        
        .music-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .music-title {
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            font-size: 1.2rem;
        }
        
        .music-title i {
            margin-right: 10px;
            color: var(--primary-dark);
        }
        
        .music-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
            gap: 15px;
        }
        
        .control-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
        }
        
        .control-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .play-btn {
            width: 50px;
            height: 50px;
        }
        
        .progress-container {
            background: #e0e0e0;
            border-radius: 5px;
            height: 6px;
            margin: 10px 0;
            cursor: pointer;
        }
        
        .progress-bar {
            background: var(--primary-dark);
            border-radius: 5px;
            height: 100%;
            width: 0%;
            transition: width 0.1s linear;
            position: relative;
        }
        
        .progress-bar::after {
            content: "";
            position: absolute;
            top: -4px;
            right: -6px;
            width: 14px;
            height: 14px;
            background: white;
            border-radius: 50%;
            border: 2px solid var(--primary-dark);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        
        .time-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: #777;
            margin-bottom: 15px;
        }
        
        .volume-container {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        
        .volume-icon {
            color: var(--primary-dark);
            margin-right: 10px;
        }
        
        .volume-slider {
            flex: 1;
            -webkit-appearance: none;
            height: 5px;
            border-radius: 5px;
            background: #e0e0e0;
            outline: none;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--primary-dark);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .volume-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }
        
        .toggle-player {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--primary-dark);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 2;
            transition: all 0.3s ease;
        }
        
        .toggle-player:hover {
            transform: rotate(90deg);
        }
        
        .music-info {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .song-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--primary-dark);
        }
        
        .song-artist {
            color: var(--text-light);
            font-size: 1rem;
        }
        
        .wave-animation {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
            margin: 15px 0;
            gap: 4px;
        }
        
        .wave-bar {
            width: 4px;
            height: 20px;
            background: var(--primary);
            border-radius: 2px;
            animation: wave 1.2s infinite ease-in-out;
        }
        
        .wave-bar:nth-child(2) { animation-delay: -1.1s; }
        .wave-bar:nth-child(3) { animation-delay: -1.0s; }
        .wave-bar:nth-child(4) { animation-delay: -0.9s; }
        .wave-bar:nth-child(5) { animation-delay: -0.8s; }
        
        @keyframes wave {
            0%, 40%, 100% { transform: scaleY(0.4); }
            20% { transform: scaleY(1); }
        }
        
        .footer {
            text-align: center;
            padding: 2rem;
            color: var(--text-light);
            margin-top: 3rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 900px) {
            .hero {
                flex-direction: column;
            }
            
            .hero-image {
                min-height: 300px;
            }
            
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            .logo {
                margin-bottom: 1.5rem;
            }
            
            .nav-links {
                justify-content: center;
            }
            
            .nav-links li {
                margin: 0 0.5rem;
            }
        }
        
        @media (max-width: 500px) {
            .music-player {
                width: 280px;
            }
            
            .hero-text {
                padding: 2rem 1.5rem;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .features {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-cloud-moon"></i>
                    <span>柔光日记</span>
                </div>
                <ul class="nav-links">
                    <li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="#"><i class="fas fa-book"></i> 育儿日记</a></li>
                    <li><a href="#"><i class="fas fa-brain"></i> AI助手</a></li>
                    <li><a href="#"><i class="fas fa-music"></i> 音乐</a></li>
                    <li><a href="#"><i class="fas fa-user"></i> 我的</a></li>
                </ul>
            </div>
        </header>

        <main class="main-content">
            <div class="hero">
                <div class="hero-text">
                    <h1>AI与年轻妈妈共育儿的温馨之旅</h1>
                    <p>柔光日记为您提供科学的育儿指导、成长记录和个性化建议，让育儿之路更加轻松愉快。结合AI智能分析，为您的宝宝提供最贴心的成长陪伴。</p>
                    <button class="cta-button">开启育儿日记 <i class="fas fa-arrow-right"></i></button>
                </div>
                <div class="hero-image">
                    <div class="hero-image-content">
                        <i class="fas fa-baby" style="font-size: 8rem; opacity: 0.9;"></i>
                        <h2 style="margin-top: 1.5rem; font-size: 1.8rem;">让爱在科技中绽放</h2>
                    </div>
                </div>
            </div>

            <h2 class="section-title">核心功能</h2>
            
            <div class="features">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-book-medical"></i>
                    </div>
                    <div class="feature-content">
                        <h3>成长记录</h3>
                        <p>记录宝宝每一天的成长瞬间，身高体重变化、第一次微笑、第一次翻身，所有珍贵时刻永久保存。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="feature-content">
                        <h3>AI育儿助手</h3>
                        <p>24小时在线的智能育儿顾问，解答喂养、睡眠、健康等各种育儿问题，提供个性化建议。</p>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-music"></i>
                    </div>
                    <div class="feature-content">
                        <h3>安抚音乐</h3>
                        <p>专为宝宝设计的舒缓音乐库，帮助宝宝更快入睡，缓解哭闹情绪，营造温馨舒适的环境。</p>
                    </div>
                </div>
            </div>
            
            <h2 class="section-title">宝宝安抚音乐</h2>
            <div style="text-align: center; max-width: 700px; margin: 0 auto 3rem;">
                <p>柔光日记为您精选了最适合宝宝的安抚音乐，帮助宝宝放松情绪、快速入睡。我们的音乐由专业儿童音乐治疗师设计，采用科学音律，促进宝宝大脑发育。</p>
            </div>
            
            <!-- 新增音乐播放器 -->
            <div class="music-player-container">
                <div class="toggle-player" @click="togglePlayer">
                    <i :class="playerVisible ? 'fas fa-times' : 'fas fa-music'"></i>
                </div>
                <div class="music-player" v-show="playerVisible">
                    <div class="music-header">
                        <div class="music-title">
                            <i class="fas fa-music"></i>
                            <span>柔光背景音乐</span>
                        </div>
                    </div>
                    
                    <div class="music-info">
                        <div class="song-title">{{ currentSong.title }}</div>
                        <div class="song-artist">{{ currentSong.artist }}</div>
                    </div>
                    
                    <div class="wave-animation" v-if="isPlaying">
                        <div class="wave-bar"></div>
                        <div class="wave-bar"></div>
                        <div class="wave-bar"></div>
                        <div class="wave-bar"></div>
                        <div class="wave-bar"></div>
                    </div>
                    
                    <div class="music-controls">
                        <div class="control-btn play-btn" @click="togglePlay">
                            <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
                        </div>
                    </div>
                    
                    <div class="progress-container" @click="setProgress">
                        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
                    </div>
                    
                    <div class="time-info">
                        <div>{{ currentTime }}</div>
                        <div>{{ duration }}</div>
                    </div>
                    
                    <div class="volume-container">
                        <div class="volume-icon">
                            <i class="fas fa-volume-down"></i>
                        </div>
                        <input type="range" min="0" max="100" v-model="volume" class="volume-slider" @input="setVolume">
                    </div>
                </div>
            </div>
        </main>
        
        <footer class="footer">
            <p>© 2023 柔光日记 - AI与年轻妈妈共育儿 | 让科技温暖每一个成长瞬间</p>
        </footer>
    </div>

    <!-- 音乐播放器 -->
    <audio ref="audioPlayer" @timeupdate="updateProgress" @loadedmetadata="setDuration" @ended="onSongEnded">
        <source src="/music/birthday_song.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>

    <script>
        // 初始化Vue应用
        new Vue({
            el: '#app',
            data: {
                isPlaying: false,
                playerVisible: true,
                progress: 0,
                currentTime: '0:00',
                duration: '0:00',
                volume: 70,
                songs: [
                    { title: "宝宝生日歌", artist: "柔光音乐", file: "/music/birthday_song.mp3" }
                ],
                currentSongIndex: 0
            },
            computed: {
                currentSong() {
                    return this.songs[this.currentSongIndex];
                }
            },
            mounted() {
                this.setVolume(); // 初始化音量
            },
            methods: {
                togglePlay() {
                    const audio = this.$refs.audioPlayer;
                    
                    if (this.isPlaying) {
                        audio.pause();
                    } else {
                        const playPromise = audio.play();
                        
                        if (playPromise !== undefined) {
                            playPromise.catch(error => {
                                console.log("播放失败:", error);
                                // 处理播放失败的情况，例如显示用户提示
                                alert("请点击页面任意位置以启用背景音乐");
                            });
                        }
                    }
                    
                    this.isPlaying = !this.isPlaying;
                },
                
                setVolume() {
                    const audio = this.$refs.audioPlayer;
                    audio.volume = this.volume / 100;
                },
                
                updateProgress() {
                    const audio = this.$refs.audioPlayer;
                    
                    if (audio.duration) {
                        this.progress = (audio.currentTime / audio.duration) * 100;
                        this.currentTime = this.formatTime(audio.currentTime);
                    }
                },
                
                setDuration() {
                    const audio = this.$refs.audioPlayer;
                    this.duration = this.formatTime(audio.duration);
                },
                
                formatTime(seconds) {
                    if (isNaN(seconds)) return "0:00";
                    
                    const min = Math.floor(seconds / 60);
                    const sec = Math.floor(seconds % 60);
                    return `${min}:${sec < 10 ? '0' : ''}${sec}`;
                },
                
                setProgress(event) {
                    const audio = this.$refs.audioPlayer;
                    const progressContainer = event.currentTarget;
                    const clickPosition = event.offsetX;
                    const containerWidth = progressContainer.clientWidth;
                    const percentage = (clickPosition / containerWidth) * 100;
                    
                    audio.currentTime = (percentage / 100) * audio.duration;
                },
                
                togglePlayer() {
                    this.playerVisible = !this.playerVisible;
                },
                
                onSongEnded() {
                    this.isPlaying = false;
                    this.progress = 0;
                    this.currentTime = '0:00';
                    
                    // 重新开始播放
                    setTimeout(() => {
                        this.$refs.audioPlayer.currentTime = 0;
                    }, 500);
                }
            }
        });
    </script>
</body>
</html>